<template>
    <div class="showPage">
        <router-link class="go-back" :to="{path:'/GroupShow',query:{line_id:line_id,product_id:product_id}}"><img src="../assets/search-input-icon-back.png"></router-link>
        <div class="mint-hea">
            <mt-swipe ref="mySwipe"  class="mint-swipe" :auto="swiper.auto"  v-if="swiper.data.length>0">
                <mt-swipe-item class="slide1" v-for="item in swiper.data">
                    <img class="mint-swipe-item-img" :src="item.src">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <!--分享-->
        <div class="share-btn shareBtn" id="shareBtn" :data-clipboard-text="shareUrl" @click="shareFn">
            <img class="share-btn-img" src="../assets/buy-share-icon1.png"/>
        </div>
        <div class="share-div" v-if="shareView" @click="shareFn" @touchmove.prevent>
            <img class="share-div-img" src="../assets/buy-share-icon2.png"/>
        </div>

        <div class="main">
            <div class="main-title1">
                {{title}}
            </div>
            <div class="main-title2">
                {{subTitle}}
            </div>
            <!-- <div class="main-tag">
                <span v-for="item in  tag">{{item.tag_name}}</span>
            </div> -->

            <div class="main-price">
                <div class="main-price-new">
                    <div class="price-usd">
                        {{person_price_currency}}{{isBusySeason ? productInfo.busy_person_price : person_price}}
                        <label class="main-price-new-person">/人  </label>
                        <label class="main-price-old">¥{{isBusySeason ? productInfo.busy_person_price_cny : person_price_cny}}<span class="main-price-old-person">/人</span></label>
                    </div>
                </div>
                <div class="main-price-sales">销量 {{Sales}} 笔</div>
            </div>
            <div class="main-price-removed">
                {{isBusySeason ? productInfo.busyCarPriceTitle : carPriceTitle}}
            </div>

            <div class="main-tips">
                <div class="main-tips-content">
                    <img class="main-tips-content-icon" src="../assets/buy-warning.png"/>
                    <label class="main-tips-content-text">{{inviteMemberTitle}}</label>
                </div>
                <!-- <div class="main-tips-btn">
                    <span>邀请下单返现</span>
                </div> -->
                <div class="main-tips-btn" @click="showPoster = true">
                    <span>生成海报</span>
                </div>
            </div>
        </div>
        <div class="h30"></div>
        <!--拼游详情-->
        <div class="groupdetails">
            <div v-if="groupOrderData" class="groupdetails-floatline">
                <div class="groupdetails-floatline-title"><p>已报名用户</p></div>
                <div class="groupdetails-floatline-date" v-if="groupOrderData.details">出发日期：{{groupOrderData.details.startDate}}</div>
            </div>
            <iscroll-view ref="scrollView" v-if="groupOrderData" class="scroll-view sub-tabs-area group" :options="{scrollX: true,preventDefault: false}" :scrollerClass="{'scroller':true}">
                <div class="group-container" v-for="item in groupOrderData.bookers" :key="item.bookerMemberId">
                    <img :src="item.bookerFaceImg" class="group-user-avatar" />
                    <div class="group-nickname">{{item.bookerNickname}}</div>
                    <div class="group-passenger">

                        <div class="group-passenger-sign">
                            <div>
                                <label class="group-passenger-text">成人 X {{item.adultPassengers}}</label>
                            </div>
                            <div>
                                <label class="group-passenger-text">儿童 X {{item.childPassengers}}</label>
                            </div>
                        </div>
                    </div>
                </div>
            </iscroll-view>

            <div v-if="groupOrderData && groupOrderData.userAlreadyIn" class="group-hint">
                <img class="group-hint-icon" src="../assets/money.png" role="img" />
                <label v-if="!groupOrderData.userCashBackStr" class="group-hint-text">您已报名，邀请更多人参加拼游可获得返现</label>
                <label v-if="groupOrderData.userCashBackStr" class="group-hint-text">您已成功参加拼游，预计可获得返现</label>
                <label class="group-hint-hightlight">{{groupOrderData.userCashBackStr}}</label>
            </div>


            <div class="groupdetails-tit"><p>拼游规则</p></div>
            <div>
                <pre class="groupdetails-rules">{{rules}}</pre>
            </div>

            <table class="table" width="100%">
                <thead>
                <tr>
                    <th v-for="item in cashBackRules" :key="item.title" class="th">{{item.title}}</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td v-for="item in cashBackRules" :key="item.title" class="td">
                        <div class="table-text">
                            每人返
                            <span class="table-price">{{person_price_currency}}{{item.cashBack}}</span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>
        <div class="h30"></div>
        <div class="tab" ref="tabMenu">
            <div class="tab-menu-mian">
                <div class="tab-menu" :class="tabMenuFixed ? 'fixed' : ''">
                    <div :class="tabArr.curHdIndex == index ? 'active' : ''" v-for="(item,index) in tabArr.data"
                         @click="tabFun(index,item.id)">{{item.title}}
                    </div>
                </div>
            </div>

            <div class="tab-body" ref="aboutBody">
                <!-- begin tab1-->
                <div class="tab-body-item panel active" ref="panelA">
                    <!-- <div class="panel-title1"><span class="panel-title1-icon"></span>产品介绍</div> -->
                    <!-- <div class="panel-title2"><span class="panel-title2-icon"></span>推荐简介</div> -->

                    <div class="panel-desc" v-html="goods_introduce">
                    </div>
                </div>
                <!-- end tab1-->
                <!-- begin tab2-->
                <div class="tab-body-item active" ref="panelB">
                    <div class="h30"></div>
                    <div class="panel" id="goFee">
                        <div class="panel-title1"><span class="panel-title1-icon"></span>费用说明</div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>费用包含</div>
                        <div class="panel-desc" v-html="price_include">
                        </div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>费用不含</div>
                        <div class="panel-desc"  v-html="price_noinclude">
                        </div>
                    </div>
                </div>
                <!-- end tab2-->
                <!-- begin tab3-->
                <div class="tab-body-item active" ref="panelC">
                    <div class="h30"></div>
                    <div class="panel">
                        <div class="panel-title1">
                            <span class="panel-title1-icon"></span>
                            注意事项
                        </div>
                        <div class="panel-warning">
                            <div class="panel-warning-title">
                                <img class="panel-warning-title-warning" src="../assets/buy-warning.png"/>
                                注意事项：
                            </div>
                            <div class="panel-warning-desc" v-html="goods_careful">
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end tab3-->
                <!-- begin tab4-->
                <div class="tab-body-item active" ref="panelD">
                    <div class="h30"></div>
                    <div class="panel">
                        <div class="panel-title1"><span class="panel-title1-icon"></span>退改规则</div>
                        <div class="panel-title2"><span class="panel-title2-icon"></span>退改规则说明</div>
                        <div class="panel-desc" v-html="goods_retreating">
                        </div>
                    </div>
                </div>
                <!-- end tab4-->
            </div>
        </div>
        <div class="h120"></div>
        <div class="buyBar">
            <router-link to="/GroupList" class="buyBar-item ">
                <img class="buyBar-item-ico" src="../assets/tabBar-home.png">
                <div class="buyBar-item-tit">拼游列表</div>
            </router-link>
            <div class="buyBar-item buyBar-group" @click="joinGroup">
                <img class="buyBar-item-ico" src="../assets/button-group.png">
                <div class="buyBar-item-tit">进群</div>
            </div>
            <router-link v-if="goods_status==1" router-link :to="{path:'/GroupShowOrder',query:{line_id:line_id,product_id:product_id,carPoolOrder:carPoolOrder}}" class="buyBar-buy">
                {{carPoolOrder ? '立即拼游' : '发起拼游'}}
            </router-link>
            <div v-else class="buyBar-buy gray" >
                商品已下架
            </div>
        </div>
        <mt-popup
        class="group-wrap"
        v-model="showGroup"
        position="bottom">
            <!-- <span @click="showGroup = false" class="group-wrap-close">X</span> -->
            <img :src="qrcode" alt="">
            <div class="group-wrap-tips">长按识别二维码进群畅聊</div>
            <mt-button class="group-wrap-btn" @click.native="showGroup = false" type="default" plain>取消</mt-button>
        </mt-popup>
        <Poster :posterInfo="productInfo" :showPoster="showPoster" @closePoster="closePosterFn"></Poster>
    </div>
</template>

<script type="text/ecmascript-6">
    import {Toast} from 'mint-ui';
    import config from "../store/config"
    import storage from "../store/localstorage"
    import wxShare from "../store/wxShare"
    import myVideo from 'vue-video'
    import Poster from "../components/Poster"

    //add by sunyifei for debug
    // import Vue from 'vue';
    // import VueToasted from 'vue-toasted';
    //
    // Vue.use(VueToasted, {
    //   fitToScreen: true,
    //   position: 'top-left'
    // });
    export default {
        name: "GroupDetail",
      data() {
        return {
          url: config.url,
          carPoolOrder: null,
          city_id: '',
          city_name: '',
          goods_id: 0,
          goods_status: 1,
          title: '',
          subTitle: '',
          Sales: '',
          comment_num: 0,
          tag: [], //关键词

          currency: 0,//
          need_confirm: '', //二次确认
          collectionArr: {
            img: require('../assets/tabBar-heart.png'),
            imgHover: require('../assets/tabBar-heart-hover.png')
          },
          swiper: {
            data: [],
            auto: 3000,

          },
          shareView: false,
          showGroup: false,

          goods_introduce: '',
          price_include: '',
          price_noinclude: '',
          goods_careful: '',
          goods_retreating: '',
          collection: 0,

          tabArr: {
            data: [
              {title: '产品介绍', id: "panelA"},
              {title: '费用说明', id: "panelB"},
              {title: '注意事项', id: "panelC"},
              {title: '退改规则', id: "panelD"}
            ],
            curHdIndex: 0
          },
          tabMenuFixed: false,
          DomScrollTop: 0,
          scrollTop: 0,
          tabtop: 0,
          shareUrl: "",//分享url
          location: {},//地理位置经纬度

          line_id: 0,//拼游id
          product_id: 0,//拼游对应产品id
          productInfo: '',  //
          dataarr: [],

          person_price: 9999,
          person_price_currency: '$',
          inviteMemberTitle: '',
          person_price_cny: 99999,
          carPriceTitle: '',
          rules: '',
          cashBackRules: [],
          groupOrderData: null,
          qrcode: require('../assets/ewm.png'),
          isBusySeason: '',
          showPoster: false
        }
      },
    components: {
        Poster
    },
    methods: {
        linkUrl() {
            var url = window.location.href;
            var locationurl = url.split('#')[1];
            var userinfo = storage.get('userinfo');
            var uid = ''
            if (userinfo) {
                uid = "uid=" + userinfo.member_id;
            } else {
                uid = "uid=";
            }
            if (locationurl.indexOf('?') == -1) {
                uid = '?' + uid;
            } else {
                uid = '&' + uid;
            }
            if (locationurl.charAt(0) == '/') {
                locationurl = locationurl.replace('/', '')
            }
            locationurl=locationurl.replace(/uid=/gi,'')
            if(config.url.indexOf('c.kuaibangxing') >= 0){
                this.shareUrl =  config.url + '/quick_help_wap1/#/' + locationurl + uid;
            }else{
                this.shareUrl =  location.origin + '/#/' + locationurl + uid;
            }
            /*测试*/
            if(config.url.indexOf('.kuaibangxing') >= 0){
                this.shareUrl =  config.url + '/quick_help_wap1/#/' + locationurl + uid;
            }else{
                this.shareUrl =  location.origin + '/#/' + locationurl + uid;
            }

        },
        handleScroll () {
            this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if(this.scrollTop> this.$refs.tabMenu.offsetTop){
                this.tabMenuFixed=true
            }else{
                this.tabMenuFixed=false
            }
        },
        shareFn() {
            let that = this;
            if (!this.$store.state.token){
                Toast({message: '当前未登录账号，登录后分享即有机会获得返现哦',duration: 3500})
            }
            if(this.isWechat){
                this.shareView = !this.shareView;
            }else{
                if(this.$store.state.appNestState){
                    let data = {
                        command: 'wxShare',
                        content: {
                            action:'wechatShare',
                            link: that.shareUrl,
                            title: that.title, // 分享标题
                            desc: that.subTitle, // 分享描述
                            imgUrl:that.swiper.data[0].src, // 分享图标
                        }
                    };
                    window.postMessage(JSON.stringify(data))
                }else {
                    let clipboard = new Clipboard(".shareBtn");
                    clipboard.on("success", function() {
                        Toast({message: '分享链接复制成功 !!!',duration: 1500})
                    });
                    clipboard.on("error", function() {
                        Toast({message: '分享链接复制失败',duration: 1000})
                    });
                }

            }
        },
        tabFun(val,id) {
            this.tabArr.curHdIndex = val;
            this.DomScrollTop = this.$refs[id].offsetTop;
            this.goScroll();
        },
        goScroll(){
            // document.body.scrollTop = document.documentElement.scrollTop = this.DomScrollTop-327;
            document.body.scrollTop = document.documentElement.scrollTop = this.DomScrollTop-30;
        },
        goRec(val){
//            this.$router.push('/GroupShow/'+val)
//            this.goods_id=val;
//            this.getData();
            this.pageScroll(0);
        },
        pageScroll(x){
            window.scroll(x, 0);
        },

      fillProductInfo(productData) {
        let _that = this;
        console.log('productData =');
        console.log(productData);

        _that.goods_status = productData.goods_status;
        _that.need_confirm = productData.need_confirm; //二次确认

        _that.currency = productData.currency;
        if (productData.goods_image) {
          let swImgRes = productData.goods_image.split(',');
          let swImgArr = [];
          for (let item in swImgRes) {
            if(swImgRes[item].length <= 0) {
              continue;
            }

            if (swImgRes[item].search(/^(http|https):\/\//) == -1) {
              swImgArr.push({src: _that.url + swImgRes[item]})
            } else {
              swImgArr.push({src: swImgRes[item]})
            }
          }
          _that.swiper.data = swImgArr//轮播图
        }
        _that.collection = productData.collection;
        _that.goods_introduce = _that.replaceImg(productData.goods_introduce);
        _that.price_include = _that.replaceImg(productData.price_include);
        _that.price_noinclude = _that.replaceImg(productData.price_noinclude);
        _that.goods_careful = _that.replaceImg(productData.goods_careful);
        _that.goods_retreating = _that.replaceImg(productData.goods_retreating);
      },
      getGroup() { //   //拼游详情接口
        let _that = this;
        let params = {
          id: _that.line_id,
        }
          _that.axios.postAll('wxsoft/grouptourinfo', params,true)
            .then(res => {
              if (res) {
                if (res.data.code === 200) {
                  _that.city_id = res.data.data.city_id;
                  _that.city_name = res.data.data.city_name;
                  _that.title = res.data.data.title;

                  _that.productInfo = res.data.data
                  _that.dataarr.push(res.data.data)
                  _that.Sales = res.data.data.total_sold; //团的销量

                  _that.person_price = res.data.data.person_price;
                  _that.person_price_cny = res.data.data.person_price_cny;
                  if(res.data.data.person_price_currency) {
                    _that.person_price_currency = res.data.data.person_price_currency;
                  }
                  _that.subTitle = res.data.data.description;
                  _that.inviteMemberTitle = res.data.data.inviteMemberTitle;
                  _that.rules = res.data.data.rules;
                  _that.cashBackRules = res.data.data.cashBackRules;
                  _that.carPriceTitle = res.data.data.carPriceTitle;

                  _that.fillProductInfo(res.data.data.product_info);
                  storage.set('person', res.data.data.product_info.person)   //储存person
                  _that.productInfo.posterImg = res.data.data.img ? res.data.data.img : _that.swiper.data[0].src;
                  _that.share()
                } else {
                  Toast({
                    message: res.data.msg,
                    position: 'top',
                    duration: 1000
                  });

                }
              }
            })
        .catch(err => {
                console.log(err)
            });
        },

      getGroupDetail() {
        console.log('getGroupDetail ++++');

        let _that = this;
        console.log('_that.carPoolOrder =' + _that.carPoolOrder);
        let params = {
          id: _that.carPoolOrder
        };


        var userinfo = storage.get('userinfo');
        if(userinfo && userinfo.member_kbx_id) {
          params.userKbxId = userinfo.member_kbx_id;
        }

        _that.axios.postAll('wxsoft/groupinfo', params,true)
          .then(res => {
            if (res) {

              console.log('res =');
              console.log(res);
              if (res.data.code === 200) {
                _that.groupOrderData = res.data.data;
                // _that.groupOrderData.userAlreadyIn = true;
                console.log('_that.groupOrderData =')
                console.log(_that.groupOrderData)
                _that.isBusy(res.data.data.details.startDate)
              } else {
                Toast({
                  message: res.data.msg,
                  position: 'top',
                  duration: 1000
                });

              }
            }
          })
          .catch(err => {
            console.log(err)
          });
      },
      isBusy(date) {
        let _that = this;
        let params = {
            id: _that.line_id,
            date
        };
        _that.axios.post('wxsoft/isBusy', params,true)
          .then(res => {
            _that.isBusySeason = res.data.isBusySeason
          })
          .catch(err => {
            console.log(err)
          });
      },
      // 替换图片路径
      replaceImg(data) {
        data = this.formatImg(data);
        data = data.replace(/<style(([\s\S])*?)<\/style>/gi, '');
        //data=data.replace( /style="(([\s\S])*?)"/gi,'');
        //data=data.replace( /width="(([\s\S])*?)"/gi,'width="100%"');
        //data=data.replace( /height="(([\s\S])*?)"/gi,'height="auto"');
        data = data.replace(/\/ueditor\//g, this.url + '/ueditor/');
        return data.replace(/<img/ig, '<img preview="99" ');
      },
      formatImg(html) {
        var newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
          var match = match.replace(/style=\"(.*)\"/gi, '');
          return match;
        });
        return newContent;
      },
      // 分享
      collectionFun() {

            this.axios.post('wapcollection', {'goods_id':this.goods_id})
                    .then(res => {
                Toast({message: res.msg, duration: 1000});
                this.collection=!this.collection;
            })
        .catch(err => console.log(err));
        },
        scrollTocomments(){
            document.body.scrollTop = document.documentElement.scrollTop = this.$refs.comments.offsetTop;
        },
        // 分享
        share() {
            wxShare({
                title: this.title, // 分享标题
                desc: this.subTitle, // 分享描述
                // link: window.location.href, // 分享链接
                imgUrl:this.swiper.data[0].src, // 分享图标
                getLocation:true,
                debug: false
            },(res)=> {//分享成功后的回调函数
                this.shareView=false
                if(res && res._type == 'location'){
                    this.location = res;
                }
                // console.log('分享成功')
            });
        },
        joinGroup(){
            let params = {id: this.line_id};
            this.axios.post('wxsoft/gqrcode', params,true).then(res => {
                this.showGroup = true;
                this.qrcode = res.data.qrcode
            }).catch(err => console.log(err));
        },
        closePosterFn(val){
            this.showPoster = val;
        }
    },
      mounted() {
        window.scrollTo(0, 0);
        /* this.goods_id = this.$route.params.id;
         if(!this.goods_id || this.goods_id == '0'){
             this.$router.push({path:"/"});
             return;
         }*/
        this.line_id = this.$route.query.line_id;
        this.product_id = this.$route.query.product_id;
        this.carPoolOrder = this.$route.query.carPoolOrder;
        this.getGroup(); //拼游接口
        this.getGroupDetail();
        window.addEventListener('scroll', this.handleScroll);
        this.linkUrl();
      },
      updated() {
        this.$previewRefresh() ////图片异步生成，图片数据更新后调用：
      },
      destroyed() {
        window.removeEventListener('scroll', this.handleScroll)
      }

    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .showPage {
        position: relative;
    }

    .go-back {
        position: absolute;
        top: rpx(30);
        left: rpx(30);
        width: rpx(64);
        height: rpx(64);
        padding-top: rpx(16);
        z-index: 999;
    img {
        width: rpx(32);
        height: rpx(32);
    }
    }

    .mint-hea{
        height: rpx(440);
    }
    .mint-hea.mint-swipe-items-wrap{
        height: rpx(440) !important;
    }
    .mint-hea .mint-swipe {
    /*height: rpx(440);*/
    /*视频播放按钮*/
    &-play{
         position: absolute;
         left: 50%;
         top: 50%;
         z-index: 999;
         margin-left: rpx(-48);
         margin-top: rpx(-48);
         width: rpx(96);
         height: rpx(96);
     }
    }

    .mint-swipe-item {
    &-img {
         width: 100%;
         height: rpx(440);
     }
    }

    //分享
      .share {
    &-btn {
         position: fixed;
         width: rpx(90);
         height: rpx(90);
         right: rpx(30);
         top: rpx(20);
         z-index: 998;
         text-align: center;
    &-img {
         width: rpx(80);
         height: rpx(80);
     }
    }
    &-div {
         position: fixed;
         background: rgba(0, 0, 0, .5);
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         z-index: 999;
         width: 100%;
         height: 100%;
         text-align: center;
    &-img {
         margin-top: rpx(30);
         width: rpx(500);
         height: rpx(220);
     }
    }
    }

    //主要信息
    .main {
        padding: 0 rpx(30) rpx(20);
        &-title1 {
            padding-top: rpx(30);
            font-size: rpx(36);
            line-height: 130%;
            font-weight: bold;
        }
        &-title2 {
            padding-top: rpx(10);
            line-height: 130%;
            font-size: rpx(26);
        }

        &-tag {
            padding-top: rpx(15);
            span {
                padding: rpx(6);
                border: solid 1px $color2;
                border-radius: $radius6;
                margin-right: rpx(6);
                font-size: rpx(20);
                color: $color5;
            }
        }

        &-price {
            display: flex;
            padding: rpx(20) 0 rpx(20);
            justify-content: space-between;
            align-items: flex-end;
            &-new {
                font-size: rpx(48);
                color: $color3;
                font-weight: bold;
                &-person {
                    font-size: rpx(32);
                }
            }
            &-old {
                padding-left: rpx(10);
                font-size: rpx(30);
                color: $color5;
                &-person {
                    font-size: rpx(26);
                }
            }
            &-removed {
                padding-left: rpx(10);
                font-size: rpx(28);
                text-decoration: line-through;
            }
            &-sales {
                padding-bottom: rpx(6);
                font-size: rpx(24);
                color: $color5;
                &-img {
                    width: rpx(30);
                    height: rpx(30);
                }
            }
        }

        &-tips {
            display: flex;
            padding: rpx(10) 0 rpx(10);
            justify-content: space-between;
            vertical-align: center;

            &-content {
                padding-top: rpx(14);
                vertical-align: center;
                &-icon {
                    margin-top: rpx(-8);
                    margin-right: rpx(10);
                    width: rpx(32);
                    height: rpx(32);
                }
                &-text {
                    font-size: rpx(26);
                }
            }

            &-btn {
                padding: rpx(14) rpx(20) rpx(10);
                min-height: rpx(48);
                vertical-align: center;
                font-size: rpx(28);
                color: #ffffff;
                background-color:#ff7d01;
                border-radius:15px;
            }

            &-img {
                width: 100%;
                height: rpx(140);
                border-radius: $radius6;
            }
        }

        &-confirm {
            padding: rpx(10) 0;
        }
        &-coupon {
            padding: 0 0 rpx(20);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: rpx(26);
            &-head {
                flex: 1;
                display: flex;
                align-items: center;
                &-icon {
                    margin-right: rpx(10);
                    width: rpx(32);
                    height: rpx(32);
                }
                &-arr {
                    width: rpx(32);
                    height: rpx(32);
                }
            }
        }
        &-coupon:hover {
            background: $bgcolor1;
        }
    }

    .price-dollar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: rpx(20);
        &-icon {
            display: inline-block;
            width: rpx(40);
            margin-right: rpx(8);
            img {
                width: 100%;
            }
        }
    }

    //规则
    .table {
        width: rpx(710);
        border-collapse: collapse;
        border: 1px solid #dadada;
        margin: rpx(20);
        font-size: rpx(28);
        &-text {
            font-size: rpx(22);
        }
        &-price {
            font-size: rpx(24);
            color: $color3;
        }
    }

    th {
        padding: rpx(12) rpx(15);
        border:1px solid #dadada;
        border-collapse: collapse;
        alignment: center;
        text-align: center;
        background: #F6DEC8;
    }

    td {
        padding: rpx(12) rpx(10);
        border:1px solid #dadada;
        border-collapse: collapse;
        alignment: center;
        text-align: center;
    }


    //选择套餐

    .selectBuy {
        padding: rpx(10) rpx(30);
        &-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: rpx(30) 0;
            border-bottom: solid 1px $color2;
            &-arr {
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-date {
            padding: rpx(30) 0;
            color: $color5;
        }
    }

    /*拼游详情样式*/
    .groupdetails {
        &-floatline {
            display: flex;
            height: rpx(76);
            border-bottom: 1px solid #cccccc;

            &-title {
                color: #333333;
                padding: rpx(20) rpx(28);
                font-size: rpx(36);
                font-weight: bold;
            }
            &-date {
                margin-left: auto;
                margin-right: rpx(20);
                vertical-align: center;
                padding: rpx(30) rpx(0);
            }
        }

        &-tit {
            font-size: rpx(36);
            color: #333333;
            height: rpx(76);
            border-bottom: 1px solid #cccccc;
            p {
                padding: rpx(20) rpx(28);
                font-weight: bold;
            }
        }

        &-rules {
            padding: rpx(20);
            font-size: rpx(28);
        }

        &-data {
            display: flex;
            height: 100%;
            &-spec {
                display: inline-block;
                /*display: flex;*/
                margin-right: rpx(15);
                &-sign {
                    box-sizing: border-box;
                    position: relative;
                    min-width: rpx(187);
                    min-height: rpx(92);
                    border: .5px solid #ff7d00;
                    background-color: #f5f5f5;
                    border-radius: rpx(15);
                    padding: 0 rpx(15);
                    &-day {
                        font-size: rpx(24);
                        color: #333333;
                        font-weight: bold;
                        text-align: center;
                        margin: rpx(0) rpx(28);
                        padding: rpx(10) rpx(0);
                        border-bottom: rpx(1) solid #cccccc;
                    }
                    &-pep {
                        font-size: rpx(24);
                        color: #333333;
                        text-align: center;
                        padding: rpx(10) rpx(0) rpx(10) rpx(0);
                        span {
                            // font-size: rpx(30);
                            color: #ff7d00;
                        }
                    }
                    &-accomplist {
                        position: absolute;
                        right: 0;
                        top: rpx(44);
                        width: rpx(50);
                        img {

                        }
                    }
                }

            }
            &-apply {
                display: inline-block;
                padding: rpx(30) rpx(15);
                &-sign {
                    width: rpx(187);
                    height: rpx(92);
                    border: solid rpx(1) #ccc;
                    background-color: #f5f5f5;
                    border-radius: rpx(15);
                    margin: rpx(0) rpx(10);
                    &-add {
                        /*padding: rpx(3) rpx(0);*/
                        text-align: center;
                        font-size: rpx(50);
                        color: #999999;
                    }
                    &-pep {
                        text-align: center;
                        font-size: rpx(30);
                        color: #666666;
                        padding: rpx(3) rpx(0);
                    }
                }
            }
        }
    }

    .group {
        width: 100%;
        height: auto;
        padding-top: rpx(40);
        padding-left: rpx(20);
        &-container {
            width: rpx(136);
            height: rpx(400);
            text-align: center;
            margin-top: rpx(20);
            margin-left: rpx(10);
            /*background: #20a833;*/
        }
        &-nickname {
            margin-top: rpx(10);
            alignment: center;
            align-content: center;
            text-align: center;
            font-size: rpx(26);
        }

        &-passenger {
            display: inline-block;
            /*display: flex;*/
            padding: rpx(10) rpx(0);
            alignment: center;
            text-align: center;
            &-sign {
                box-sizing: border-box;
                position: relative;
                width: rpx(120);
                border: 1px solid #ff7d00;
                background-color: #f5f5f5;
                border-radius: rpx(10);
                padding: rpx(4) rpx(0);
            }
            &-text {
                margin-top: rpx(10);
                alignment: center;
                align-content: center;
                text-align: center;
                font-size: rpx(22);
                color: $color3;
            }
        }
        &-user {
            &-avatar {
                width: rpx(96);
                height: rpx(96);
                border-radius: rpx(100);

            }
        }

        &-hint {
            padding-left: rpx(0);
            border: rpx(1) solid #ff7d00;
            background-color: #ffefdf;
            border-radius: rpx(15);
            margin: rpx(0) rpx(30);
            &-icon {
                width: rpx(48);
                height: rpx(48);
            }

            &-text {
                margin-left: rpx(20);
                font-size: rpx(22);
            }

            &-hightlight {
                margin-left: rpx(20);
                font-size: rpx(22);
                color: $color3;
            }
        }
    }

    pre {
        white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
        white-space: -pre-wrap; /* Opera */
        white-space: -o-pre-wrap; /* Opera */
        white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
        word-wrap: break-word; /* IE 5.5+ */
    }

    /* tab样式 */
    .tab {
        background: $color0;
        &-menu-mian {
            min-height: rpx(92);
        }
        &-menu {
            height: rpx(92);
            display: flex;
            padding: 0 rpx(30);

        }
        .fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: $color0;
            z-index: 999;
        }
        &-menu div {
            flex: 1;
            padding: rpx(30) rpx(20);
            text-align: center;
            font-size: rpx(30);
            border-bottom: solid $color2 1px;
        }
        &-menu .active {
            color: $color3;
            border-bottom: solid $color3 rpx(2);
        }

        &-body {
            &-item {
                display: none;
            }
            &-item.active {
                display: block;
            }
        }

    }

    //产品介绍
    .panel {
        padding: rpx(30);
        &-title1 {
            padding: rpx(20) 0;
            font-size: rpx(40);
            display: flex;
            align-items: center;
        }
        &-title1-icon {
            display: inline-block;
            margin-right: rpx(20);
            width: rpx(8);
            height: rpx(40);
            border-radius: rpx(10);
            background: $color3;

        }
        &-title2 {
            padding: rpx(30) 0 rpx(30);
            font-size: rpx(36);
        }
        &-title2-icon {
            display: inline-block;
            margin-right: rpx(20);
            margin-bottom: rpx(6);
            width: rpx(12);
            height: rpx(12);
            border-radius: 50%;
            background: $color3;

        }
        &-desc {
            font-size: rpx(30);
            line-height: 200%;
            word-break: break-all;
            height: auto;
            overflow: hidden;
            img {
                max-width: 100% !important;
                height: auto;
                padding: rpx(10) 0;
            }
        }
        &-prompt {
            padding: rpx(20) 0;
            font-size: rpx(24);
        }
        &-warning {
            padding: rpx(30);
            padding: rpx(30);
            border: solid 1px #fbde9d;
            background: #fffbf2;
            &-title {
                padding: rpx(10) 0 rpx(20);
                font-weight: rpx(36);
                color: $color7;
                &-warning {
                    width: rpx(48);
                    height: rpx(48);
                }
            }
            &-desc {
                font-size: rpx(24);
                line-height: 200%;
                word-break: break-all;
                height: auto;
                overflow: hidden;
                img {
                    max-width: 100% !important;
                    padding: rpx(10) 0;
                    height: auto;
                }
            }
        }

    }

    .route {
        position: relative;
        padding-bottom: rpx(20);
        border-left: solid rpx(2) $color2;
    &-head {
    &-mark {
         position: absolute;
         left: rpx(-16);
         top: rpx(30);
         width: rpx(32);
         height: rpx(32);
     }
    padding-top: rpx(26);
    padding-left: rpx(30);
    font-size: rpx(30);
    font-weight: bold;
    }
    &-body {
         margin: rpx(30) rpx(30) 0;
         padding: rpx(30);
         border: solid 1px #fbde9d;
         background: #fffbf2;
         font-size: rpx(24);
         line-height: 200%;
    img {
        max-width: 100%;
    }
    }
    &-more {
         text-align: center;
         display: flex;
         justify-content: center;
         padding: rpx(60) 0 rpx(40);
     }
    &-more-btn {
         display: block;
         padding: rpx(15) rpx(50);
         border-radius: $radius30;
         box-shadow: 0 0 rpx(40) $color2;
         color: $color3;
         font-size: rpx(30);
     }
    }

    //评论

      .comment {
    &-list {
    &-item {
         border-bottom: solid 1px $color2;
         padding: rpx(30) 0;
    &-head {
         display: flex;
         align-items: center;
         padding: rpx(20) 0;
    &-avatar {
         width: rpx(80);
         height: rpx(80);
     }
    &-title {
         padding: rpx(10) rpx(20);
     }
    &-username {
         font-size: rpx(30);
     }
    &-date {
         font-size: rpx(24);
         font-size: $color5;
     }
    }
    &-desc {
         font-size: rpx(26);
         line-height: 200%;
     }
    &-imgs {
         padding: rpx(20) 0;
    img {
        width: 30.3%;
        height: rpx(220);
        margin-right: 3%;
        margin-bottom: rpx(20);
    }
    }
    }
    &-item:last-child {
         border-bottom: none;
     }
    }
    &-more {
    &-url {
         display: block;
         padding: rpx(20) rpx(30);
         font-size: rpx(34);
         text-align: center;
         border: #b5b5b5 solid 1px;
         border-radius: $radius6;
     }
    }
    }

    /*猜你喜欢*/
    .rec {
        padding: rpx(15);
        background: $bgcolor1;
    &-title {
         padding: rpx(40) rpx(15);
         font-size: rpx(40);
     }
    &-list {
         display: flex;
         flex-wrap: wrap;
    &-item {
         width: 50%;

         border-radius: 0 0 $radius6 $radius6;
         margin-bottom: rpx(30);
         padding: 0 rpx(15);
    &-img {
         border-radius: $radius6 $radius6 0 0;
         width: 100%;
         height: rpx(220);
     }
    &-info {
         display: block;
         width: 100%;
         height: rpx(160);
         background: $color0;
         border-radius: 0 0 $radius6 $radius6;
     }
    &-tit {
         padding: rpx(20) rpx(20) 0;
         font-size: rpx(26);
         line-height: 130%;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical
     }
    &-price {
         padding: rpx(20);
         font-size: rpx(30);
         font-weight: bold;
         color: $color3;
    .old {
        padding-left: rpx(10);
        font-size: rpx(24);
        color: $color5;
        text-decoration: line-through;
    }
    }
    }
    }
    }

    //底部
    .buyBar {
        position: fixed;
        z-index: 1000;
        left: 0;
        right: 0;
        bottom: 0;
        border-top: $color2 solid 1px;
        background: $color0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        &-item {
            width: rpx(150);
            height: rpx(90);
            text-align: center;
            padding: 0;
            border-right: $color2 solid 1px;
            color: #696969;
            &-ico {
                padding-top: rpx(6);
                width: rpx(48);
                height: rpx(48);
            }
            &-tit {
                padding-top: rpx(6);
                font-size: rpx(24);
            }
        }
        &-item:last-child {
            border-right: none;
        }
        &-group {
            background: #2393e9;
            color: #fff;
            &-ico {
                padding-top: rpx(6);
                width: rpx(48);
                height: rpx(58);
            }
        }
        &-buy {
            flex: 1;
            height: rpx(90);
            line-height: rpx(90);
            background: linear-gradient(to left, #ff5722, #ffc000);
            text-align: center;
            font-size: rpx(40);
            color: $color0;
        }
        .gray {
            background: #ccc;
        }
        &-active {
            color: $color3;
        }
    }
    .group-wrap{
        padding: rpx(60) rpx(40);
        text-align: center;
        // position: relative;
        &-close{
            position: absolute;
            padding: rpx(40);
            top: rpx(0);
            right: rpx(10);
            font-size: rpx(40);
            color: #999;
            font-weight: bolder;
        }
        img{
            position: relative;
            width: rpx(500);
            height: auto;
        }
        &-tips{
            font-size: rpx(26);
            color: #999;
            padding: rpx(10) 0 rpx(30);
        }
        &-btn{
            width: 100%;
        }
    }

</style>

<style lang="scss">
    .showPage .__cov-contrl-content{
        display: none!important;
    }
    //产品介绍
      .panel {
    &-desc {
         font-size: rpx(30);
         line-height: 200%;
         word-break: break-all;
         height: auto;
         overflow: hidden;
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    p{
        margin-bottom: rpx(20);
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    }
    }
    &-warning {
    &-desc {
         font-size: rpx(24);
         line-height: 200%;
         word-break: break-all;
         height: auto;
         overflow: hidden;
    img{
        max-width: 100% !important;
        height: auto;
        padding-bottom: rpx(20);
        border-bottom: solid 10px #fff;
    }
    }
    }
    }
</style>
